<template>
<div>
    <div class="headerBox">
        <!-- 时间 -->
        <p class="datetime_text">
            <span>15:04:22</span>
            <span>2024-12-24 星期五</span>
        </p>
        <!-- 标题 -->
        <p class="header_title">贵州天然气管网可视化平台</p>
    </div>
     <!-- tabs -->
        <div class="tabsBox">
            <!-- 左边 -->
            <!-- <ul>
                <li v-for="(item,index) in lefttabs" :key="index" @click="handleTab(index)" :class="index==itemactive?'activeitem':''"><span>{{item}}</span></li>
            </ul> -->
            <!-- 右边 -->
            <ul>
                <li v-for="(item,index) in righttabs" :key="index" @click="handleTab(index+3)" :class="index+3==itemactive?'activeitem':''"><span>{{item}}</span></li>
            </ul>
        </div>
</div>
</template>
<script>
export default{
    data(){
        return{
            itemactive:0,
            lefttabs:["总览","工艺监控","综合报警"],
            righttabs:["视频监控","数据统计","巡线系统"],
        }
    },
    methods:{
        handleTab(index){
            console.log(index)
            this.itemactive=index
        }
    }

}
</script>
<style scoped lang="less">
p,li{
    padding: 0;
    margin: 0;
}
li{
    list-style-type:none;
}
.headerBox{
    width: 100%;
    height: 134px;
    background: url("../assets/header/header-bg.png");
    background-size: 100% 100%;
    position: relative;
    background-repeat: no-repeat;
}
.datetime_text{
    padding-top: 12px;
    margin-left: 28px;
    color: #1FC6FF;
    line-height: 24px;
   span:nth-of-type(1){
    font-size: 16px;
    font-weight: bold;
   }
   span:nth-of-type(2){
    border-left: 1px solid #135280;
    line-height: 18px;
    padding-left: 12px;
    margin-left: 12px;
    font-size: 12px;
   }

}
.header_title{
    position:absolute ;
    top:39px;
    left: 0;
    width: 100%;
    height: 62px;
    line-height: 62px;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    background: linear-gradient(0deg, #95E1FA , #FFFFFF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tabsBox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 40px);
    margin-top: -40px;
    ul{
        display: flex;
        align-items: center;
         li{
           width: 162px;
           height: 49px;
           line-height: 49px;
           border: 1px solid #003651; 
           background: linear-gradient(to bottom,  #152F33,#0B181A ); 
           span{
            width: 100%;
            display: inline-block;
            
            text-align: center;
            font-size: 18px;
            color: #B4C0CC;
            cursor: pointer;
           }
        }
    }
    ul:nth-of-type(1){
        margin-left: 20px;
        li{
            transform: skewX(45deg);
            margin-right: 20px;
            border-radius: 0  0 6px 14px;
            span{
                transform: skewX(-45deg);
            }
        }
    }
    ul:nth-of-type(2){
        margin-right: 20px;
        li{
            transform: skewX(-45deg);
            margin-left: 20px;
            border-radius: 0  0 14px 6px;
            span{
                transform: skewX(45deg);
            }
        }
    }
    .activeitem{
         border: 1px solid #00A9FF ; 
         span{
            color: #00A9FF;
            font-size: 24px;
         }
    }
}
</style>